<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- STYLESHEETS -->
    <!--[if lt IE 9]><script src="../../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css" />
    <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher" />
    <link rel="stylesheet" type="text/css" href="../../css/responsive.css" />
    <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <!-- SELECT2 -->
    <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css" />
    <!-- UNIFORM -->
    <link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css" />
    <!-- datatable -->
    <link rel="stylesheet" href="../../js/datatables/datatable.css" />
    <link rel="stylesheet" href="../../js/datepicker/datepicker.css" />
</head>

<body>
    <header class="navbar clearfix" id="header">
    </header>
    <!-- PAGE -->
    <section id="page">
        <!-- SIDEBAR -->
        <div id="sidebar" class="sidebar">
            <div class="sidebar-menu nav-collapse">
                <!-- SIDEBAR MENU -->
                <ul>
                </ul>
            </div>
        </div>
        <!-- /SIDEBAR -->
        <div id="main-content">
            <div class="container">
                <div class="row">
                    <div id="content" class="col-lg-12">
                        <!-- PAGE HEADER-->
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="page-header">
                                    <!-- STYLER -->
                                    <!-- /STYLER -->
                                    <!-- BREADCRUMBS -->
                                    <ul class="breadcrumb">
                                        <li> <i class="fa fa-home"></i> <a href="index.html">首页</a> </li>
                                        <li> <a href="#">数据统计</a> </li>
                                        <li>销售月报</li>
                                    </ul>
                                    <!-- /BREADCRUMBS -->
                                </div>
                            </div>
                        </div>
                        <!-- /PAGE HEADER -->
                        <!-- 数据统计 start -->
                        <!-- <div class="row"> 
        <div class="col-md-12"> 
         <div class="row"> 
          <div class="col-md-12"> 
           <div class="box border primary"> 
            <div class="box-title"> 
             <h4> <i class="fa fa-bars"></i> 查询条件 </h4> 
            </div> 
            <div class="box-body big data-sta-top"> 
             <form class="form-horizontal"> 
              <div class="form-group mrg-bt10"> 
                <label class="col-sm-1 control-label" style="width: auto;line-height: 34px;vertical-align: middle;">时间：</label>
                <a href="javascript:;" class="btn btn-info data-sta-btn">今天</a>
                <a href="javascript:;" class="btn btn-success data-sta-btn">昨天</a>
                <a href="javascript:;" class="btn btn-warning data-sta-btn">最近7天</a>
                <div class="col-md-3">
                  <input class="form-control" type="text" placeholder="Default input" style="display: inline-block" name="data-dates">
                </div>
              </div> 
             </form> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
	   </div> -->
                        <!-- 数据统计 end -->
                        <!-- FORMS QUERY-->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="box border primary">
                                            <div class="box-title">
                                                <h4> <i class="fa fa-bars"></i> 查询条件 </h4>
                                            </div>
                                            <div class="box-body">
                                                <form class="form-horizontal" role="form" id="form_Order" data-date-format="mm-yyyy">
                                                    <div class="row">
                                                        <label class="col-sm-1 control-label" style="width: auto;line-height: 34px;vertical-align: middle;">日期区间：</label>
                                                        <div class="col-sm-4" style="display: inline-flex; margin-left: -10px;">
                                                            <div class="col-sm-2" style="width: 130px">
                                                                <input type="text" name="startDate" class="form-control bootstrap-datepicker" />
                                                            </div>
                                                            <div style="width: 20px">至</div>
                                                            <div class="float-left" style="width: 130px">
                                                                <input type="text" name="endDate" class="form-control bootstrap-datepicker" />
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-1">
                                                            <a class="btn btn-primary search">查询</a>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /FORMS QUERY -->
                        <div class="row">
                            <!-- TABLES -->
                            <div class="col-md-12">
                                <!-- BOX -->
                                <div class="box border primary">
                                    <div class="box-title">
                                        <h4> <i class="fa fa-table"></i> 记录数： <span id="total"></span> 条 </h4>
                                    </div>
                                    <div class="box-body">
                                        <table id="db_report_list" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
                                        </table>
                                    </div>
                                </div>
                                <!-- /BOX -->
                            </div>
                        </div>
                        <!-- /TABLES -->
                        <div class="footer-tools">
                            <span class="go-top"> <i class="fa fa-chevron-up"></i> Top </span>
                        </div>
                    </div>
                    <!-- /CONTENT-->
                </div>
            </div>
        </div>
    </section>
    <!--/PAGE -->
    <!-- JAVASCRIPTS -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- JQUERY -->
    <script src="../../js/jquery/jquery-2.0.3.min.js"></script>
    <!-- spinner -->
    <script src="../../js/spinner/spin.js"></script>
    <!-- BOOTSTRAP -->
    <script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
    <!-- BLOCK UI -->
    <script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
    <!-- AUTOSIZE -->
    <script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
    <!-- DATA TABLES -->
    <script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
    <script type="text/javascript" src="../../js/datatables/datatable.js"></script>
    <script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
    <script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
    <script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>
    <script type="text/javascript" src="../../js/datepicker/datepicker.js"></script>
    <!-- SELECT2 -->
    <script type="text/javascript" src="../../js/select2/select2.min.js"></script>
    <!-- UNIFORM -->
    <script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
    <!-- COOKIE -->
    <script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
    <!-- CUSTOM SCRIPT -->
    <script src="../../js/script.js"></script>
    <script src="../../js/common.js"></script>
    <script>
        var Report = function() {
            var $mainDataTable = null;
            var searchData = function() {
                var startMonth = $("input[name=startDate]").val();
                var endMonth = $("input[name=endDate]").val();
                var url = App.getContextPath() + "admin/report/supplierOrderReportByMonthAndPlatform.do?";
                if (startMonth != "")
                    url += "&startMonth=" + startMonth;
                if (endMonth != "")
                    url += "&endMonth=" + endMonth;
                if ($mainDataTable) {
                    $mainDataTable.api().ajax.url(url).load();
                    return;
                }
                var dtSetting = $.dataTableSetting({
                    "ajaxSource": url,
                    "serverSide": true,
                    "bFilter": false, // 去掉搜索框
                    "bLengthChange": true, // 每页显示数量							
                    "sScrollX": "100%",
                    "sScrollXInner": "100%",
                    "iDisplayLength": 25,

                    "bSort": false,
                    "aoColumns": [{
                        "mDataProp": "month",
                        "sTitle": "销售月份",
                        "width": "10%",
                    }, {
                        "mDataProp": "platformName",
                        "sTitle": "销售平台",
                        "width": "10%"
                    }, {
                        "mDataProp": "payOrderPrice",
                        "sTitle": "支付金额",
                        "width": "12%",
                        "class": "format_thousands"
                    }, {
                        "sTitle": "毛利率",
                        "mDataProp": "grossMargin",
                        "width": "12%",
                        "class": "format_thousands"
                    }, {
                        "sTitle": "操作",
                        "mDataProp": "payOrderCount",
                        "width": "12%",
                        "render": function(data, type, row) {
                            var str = "<p class='btn-toolbar' style='margin:0px'><a href='./sales_detail.html?platformNo=" + row.platformNo + "&startMonth=" + row.month + "'><button class='btn btn-success btn-xs bt_detail btn-width'><i class='fa fa-pencil-square-o'></i>明细</button></p>";
                            return str;
                        },
                    }]
                });
                $mainDataTable = $("#db_report_list").dataTable(dtSetting);
            };
            var exportOrder = function() {
                var strdiv = '<form id=export action=' + App.getContextPath() + 'admin/order/exportOrder.do><input type=hidden name=startDate value=' + $("[name=startDate]").val() + '><input type=hidden name=endDate value=' + $("[name=endDate]").val() + '></form>';
                $("body").append(strdiv);
                $("#export").submit();
            };
            return {
                init: function() {
                    let current = new Date()
                    let initDate = `${current.getFullYear()}-${current.getMonth()+1}`
                    console.log(initDate);
                    $.initDate($("#form_Order"), initDate, initDate, 'yyyy-mm', 1);
                    $(".search").click(searchData);
                    searchData();
                }
            }
        }();
        $(function() {
            $("#header").load("../head.html");
            App.init(); //Initialise plugins and elements	 
            Report.init();
        });
    </script>
    <!-- /JAVASCRIPTS -->
</body>

</html>